<template>
  <div>
    <el-card class="outer">
      <!--  页头+筛选栏-->
      <el-page-header @back="goBack" content="外卖预订">
      </el-page-header>
      <el-form>
        <el-form-item label="商品分类">
          <el-radio-group v-model="type" @input="getDiffFoods">
            <el-radio :label="1">全部</el-radio>
            <el-radio :label="2">炒菜盖饭</el-radio>
            <el-radio :label="3">米饭面条</el-radio>
            <el-radio :label="4">汉堡披萨</el-radio>
            <el-radio :label="5">饮品甜点</el-radio>
            <el-radio :label="6">炒饭拌饭</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <!--  商品内容-->
      <el-row gutter="40">
        <el-col :span="6" v-for="(item,index) in foodsList" :key="index" style="margin-bottom: 20px;">
          <el-card  :body-style="{ padding: '0px' }" @click.native="Purchase(item.dishId,item.money)" style="cursor:pointer;" >
            <img :src="item.picture" class="image" >
            <el-divider></el-divider>
            <div style="padding: 14px;">
              <h4 style="color: red;margin:0">{{item.money}}￥</h4>
              <span>{{ item.dishName }}</span>
              <el-button type="text" class="button" @click="Purchase(item.dishId,item.money)">购买</el-button>
            </div>
          </el-card>

          <!--          购买对话框-->
          <el-dialog title="购买商品" :visible.sync="dialogFormVisible">
            <el-form :model="detailForm">
              <el-form-item label="购买数量" :label-width="formLabelWidth">
                <el-input-number v-model="detailForm.num" :min="1" :max="20" label="描述文字"></el-input-number>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="CreateDetail">确 定</el-button>
            </div>
          </el-dialog>

        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import recommend from "../components/recommend";
import {getFoodsInfo, getFoodsByClass, saveFoodsDetail,} from "@/api";

export default {
  name: "Shopping",
  components:{recommend},
  data(){
    return{
      formLabelWidth:'120px',
      dialogFormVisible:false,
      type:1,
      foodsList:[],
      detailForm:{
        num:'',
        money:0,
        foodsId:'',
        userId:'',
        status:'正在配送'
      },
      imgHeight: 0,
      temp:{
        dishId:0,
        money:0,
      }

    }
  },
  methods:{
    goBack(){
      this.$router.back();
    },
    Purchase(dishId,money){
      this.dialogFormVisible=true
      this.temp.dishId=dishId
      this.temp.money=money
    },
    //外卖分类查询
    getDiffFoods(value){
      let calss
      switch (value){
        case 1:break;
        case 2:calss='炒菜盖饭';break;
        case 3:calss='米粉面条';break;
        case 4:calss='汉堡披萨';break;
        case 5:calss='饮品甜点';break;
        case 6:calss='炒饭拌饭';break;
      }
      getFoodsByClass({
        "dishClass":calss
      }).then(res=>{
        if(value!==1){
          this.foodsList=res.data
        }else{
          this.getAllFoods()
        }
      })
    },
    //获取全部外卖信息
    getAllFoods(){
      getFoodsInfo().then(res=>{
        // console.log(res.data)
        this.foodsList=res.data
      })
    },
    //创建订单
    CreateDetail(){
      this.detailForm.account = this.GLOBAL.account
      this.detailForm.money=this.detailForm.num*this.temp.money
      this.detailForm.foodsId=this.temp.dishId
      saveFoodsDetail({
        "account":this.detailForm.account,
        "dishId":this.detailForm.foodsId,
        "money": this.detailForm.money,
        "number": this.detailForm.num,
        "status": "正在配送"
      }).then(res=>{
        // console.log(res)
        if(res.status===200){
          this.$message.success('下单成功')
        }
      })
      this.dialogFormVisible = false
    }

  },
  created() {
    this.getAllFoods()
  }
}
</script>

<style scoped>
.outer{
  margin: 20px 100px 20px 100px
}
.el-form{
  margin-top: 10px;
  margin-bottom: 0;
}
.el-divider{
  margin-top: 10px;
  margin-bottom: 10px;
  bottom: 10px;
}
.shopCard{
  margin-left: 10px;
  margin-right: 10px;
}
img {
  width: 100%;
  height: 300px;
}
</style>
